<template>
	<div class="fix-all  order-list">
    <div class="container">
			<div v-if="!(allOrder.length>0)" class="order-list-empty">没有历史订单</div>
      <dl class="order-list-dl" :class="{'one':item.cart.qty==1}" v-for="item in allOrder "  v-gesture:tap.stop.prevent="goDetail($index)">
        <dt class="order-list-dt mb"><span class="dt1">{{item.processStatus.processStatusTitle.indexOf("成功")>-1&&!item.extended.numberPlate?"取餐号："+item.serialNo:item.processStatus.processStatusTitle}}</span><span class="dt3">￥{{item.subtotal}}</span></dt>
        <dd class="order-list-dd item" v-for="dd in item.cart.items | limitBy 3" ><span class="name">{{dd.inventoryName}}</span><span class="amount">￥{{dd.amount }}</span><span class="qty">X {{dd.qty}}</span></dd>
        <dd class="order-list-dd item" v-if="item.cart.qty>3"><span class="name">...</span></dd>
        <dd class="order-list-dd time mt"><span class="name">合计{{item.cart.qty}}项</span><span class="amount">{{(item.closeTime||item.createTime) | formatDate}}</span></dd>
      </dl>

    </div>
    <button class="bottom-buttom"" v-gesture:tap.stop.prevent="continueToOrder()">点    单</botton>
	</div>
</template>

<script type="text/javascript">
	import Order from "../business/order";
	import checkOrder from "../business/check-order";


	import {
	  OrderList
	}
	from '../config';

	export default{
    data:function(){

      return {
        //props
        order: this.$parent.order,
				allOrder:this.$parent.allOrder,
				isBtn:false
      }
    },
		methods:{
      continueToOrder: function(){
				this.isBtn =true;
        this.$router.go({name:"inventory-list",query:{isShowStartPage:false}});
			},
			goDetail(id){
				this.isBtn =true;
				this.$router.go({ name: 'order-detail', query: { id: id }})
			}
	  },
		ready(){
		},
		route: {
			canDeactivate : function(transition){
				if(this.isBtn){
					return transition.next();
				} else {
					this.$router.go({name:"start-page"});
					return transition.next();
				}
			}
		}
  }
</script>

<style lang='sass'>
	@import '../assets/sass/global/themes.scss';
  .order-list{
    background: #f7f7f7;
  }
  .order-list .container{
    position: absolute;
    width: 100%;
    bottom: 50px;
    overflow-y: scroll;
    top:0;
		.order-list-empty{text-align: center;margin-top: 60%;font-size:16px; }
  }

	.order-list-dl{background: white;border-bottom: 6px solid #f7f7f7;}
  .order-list-dt{line-height: 60px;border-bottom: 1px solid #ececec;padding: 0 15px;}
  .order-list-dt span{display: inline-block;}
  .order-list-dt .dt1{width: 50%;font-size: 16px;}
  .order-list-dt .dt2{width: 25%;font-size: 13px;}
  .order-list-dt .dt3{width: 25%;text-align: right;font-size: 21px;color:$font-color-primary;float: right;}
  .order-list-dd{line-height:44px;font-size: 14px;color: #727272;padding: 0 15px;}
  .order-list-dd.time{border-top: 1px solid #ececec;}
	.order-list-dd:after{
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
	.order-list-dl .mt  {margin-top: 10px;}
	.order-list-dl .mb  {margin-bottom: 10px;}
	.order-list-dd span{display: inline-block;}
  .order-list-dd .name{float: left;}
	.order-list-dd .amount{float: right;width: 3rem;text-align: right;}
  .order-list-dd .qty{float: right;}
	.order-list-dl.one .order-list-dd{line-height: 60px;margin-top: 0 !important;}
	.order-list-dl.one 	.mt{margin-top: 0px;}
	.order-list-dl.one .mb  {margin-bottom: 0;}
</style>
